সিএসএস এর মাধ্যমে একটি এইচটিএমএল ফর্মকে অসাধারণ ভাবে সাজানো যায়ঃ
নিচে যে সুন্দর একটি এইচটিএমএল ফর্মটি দেখতে পাচ্ছেন তা সিএসএস দিয়ে স্টাইল করা হয়েছে।
ইনপুট ফিল্ড এর প্রস্থ নির্ধারণের জন্য width প্রোপার্টি ব্যবহার করা হয়।
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<style>
input {
width: 100%;
}
</style>
</head>
<body>
<p>একটি full-width ইনপুট ফিল্ডঃ</p>
<form>
<label for="fname">নাম</label>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>
উপরের উদাহরণটি সব ধরনের width ইলিমেন্ট এর জন্য প্রযোজ্য। আপনি যদি শুধুমাত্র একটি নির্দিষ্ট ইনপুট এলিমেন্টকে স্টাইল করতে চান, তাহলে আপনি এট্রিবিউট সিলেক্টর ব্যবহার করতে পারেনঃ
input[type=text] - শুধুমাত্র টেক্সট ফিল্ডকে সিলেক্ট করে।input[type=submit] - শুধুমাত্র সাবমিট ফিল্ডকে সিলেক্ট করে।input[type=number] - শুধুমাত্র নাম্বার ফিল্ডেকে সিলেক্ট করে।টেক্সট ফিল্ড এর ভেতরের চারপাশে ফাকা জায়গা যুক্ত করার জন্য padding প্রোপার্টি ব্যবহার করতে হয়।।
টিপসঃ একাধিক input ফিল্ডের ক্ষেত্রে আপনি যদি ফিল্ডের চারপাশে কিছু margin যুক্ত করতে চান তাহলে মার্জিন প্রোপার্টি ব্যবহার করুনঃ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<p>পেডিংসহ টেক্সট ফিল্ডঃ</p>
<form>
<label for="fname">নাম</label>
<input type="text" id="fname" name="fname">
<label for="fname">ঠিকানা</label>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
উপরের উদাহরণে লক্ষ্য করলে দেখবেন box-sizing প্রোপার্টির ভ্যালু border-box সেট করা হয়েছে। এর মাধ্যমে আমরা নিশ্চিত হয় যে, এলিমেন্টের প্যাডিং এবং মার্জিন এর মোট দৈর্ঘ্য এবং প্রস্থের মধ্যে অন্তর্ভুক্ত হয়েছে।
box-sizing প্রোপার্টি সম্পর্কে আর বিস্তারিত জানতে আমাদের সিএসএস(৩) box-sizing অধ্যায় ভিজিট করুন।
বর্ডারের আকার এবং কালার পরিবর্তন করার জন্য সিএসএস border প্রোপার্টি ব্যবহার করা হয়। এছাড়া বর্ডারের আকার গোলাকৃতি কর্ণারের মত করার জন্য border-radius প্রোপার্টি ব্যবহার করুনঃ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid teal;
border-radius: 4px;
}
</style>
</head>
<body>
<p> বর্ডারসহ টেক্সট ফিল্ড </p>
<form>
<label for="fname">নাম </label>
<input type="text" id="fname" name="fname">
<label for="lname">ঠিকানা </label>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
আপনি যদি শধুমাত্র ইনপুট ফিল্ডের নিচের বর্ডার পরিবর্তন করতে চান তাহলে border-bottom প্রোপার্টিটি ব্যবহার করুনঃ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid teal;
}
</style>
</head>
<body>
<p>শুধুমাত্র একটি বটম বর্ডারসহ টেক্সট ফিল্ড</p>
<form>
<label for="fname">নাম</label>
<input type="text" id="fname" name="fname">
<label for="fname">ঠিকানা</label>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
ইনপুট ফিল্ডে ব্যাকগ্রাউন্ড কালার যুক্ত করার জন্য background-color প্রোপার্টি এবং টেক্সটের কালার পরিবর্তনের জন্য color প্রোপার্টি ব্যবহার করা হয়ঃ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
background-color: #3CBC8D;
color: white;
}
</style>
</head>
<body>
<p>কালার টেক্সট ফিল্ডঃ</p>
<form>
<label for="fname">নাম</label>
<input type="text" id="fname" name="fname" value="হাফিজ">
<label for="fname">ঠিকানা</label>
<input type="text" id="lname" name="lname" value="চাঁদপুর">
</form>
</body>
</html>
যখন ইনপুট ফিল্ডে ক্লিক করা হয় বা ইনপুট ফিল্ড ফোকাস হয়, তখন কিছু কিছু ব্রাউজার ডিফল্টভাবে এর চারপাশে নীল আউটলাইন যুক্ত করে। আপনি চাইলে outline: none; ব্যবহার করে এই ইফেক্ট দুর করতে পারেন।
ফোকাস অবস্থায় কোন কিছু সেট করার জন্য :focus সিলেক্টরটি ব্যবহার করা হয়ঃ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #555;
outline: none;
}
input[type=text]:focus {
background-color: lightblue;
}
</style>
</head>
<body>
<p>এই উদাহরনে টেক্সট ফিল্ডে ক্লিক করলে ব্যাকগ্রাউন্ড কালার পরিবর্তনের জন্য আমরা:focus selector ব্যবহার করি।</p>
<form>
<label for="fname">প্রথম নাম</label>
<input type="text" id="fname" name="fname" value="সুহিন">
<label for="fname">শেষ নাম</label>
<input type="text" id="lname" name="lname" value="রাজু">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #39ac73;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=text]:focus {
border: 3px solid #26734d;
}
</style>
</head>
<body>
<p>ফোকাস অবস্থায় কোন কিছু সেট করার জন্য :focus সিলেক্টরটি ব্যবহার করা হয়ঃ </p>
<p><b>নোটঃ</b> বর্ডার কালারকে এনিমেট করার জন্য আমরা CSS3 transition প্রোপার্টি ব্যবহার করব (এখানে কালারটি ফোকাসে করতে ০.৫ সেকেন্ড সময় নেয়।</p>
<form>
<label for="fname">নাম</label>
<input type="text" id="fname" name="fname" value="নূর মোহাম্মদ রাজু">
<label for="fname">পিতার নাম</label>
<input type="text" id="lname" name="lname" value="মো: হাবিব উল্লাহ">
</form>
</body>
</html>
ইনপুট ফিল্ডের মধ্যে আইকন/ইমেজ যুক্ত করার জন্য background-image প্রোপার্টি এবং অবস্থান নির্ধারণ করার জন্য background-position প্রোপার্টি ব্যবহার করা হয়।
নিচের উদাহরণে লক্ষ্য করলে দেখবেন আইকনের বামপাশে যথার্থ স্পেস রাখার জন্য উপরোক্ত প্রোপার্টি ছাড়াও আমরা padding-left প্রোপার্টি ব্যবহার করেছি।
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 2px solid #39ac73;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>
<p>আইকনসহ ইনপুটঃ</p>
<form>
<input type="text" name="search" placeholder="সার্চ..">
</form>
</body>
</html>
ফোকাস হওয়া অবস্থায় সার্চ ইনপুটকে এনিমেট করার জন্য এই উদাহরণে আমরা সিএসএস(৩) transition প্রোপার্টি ব্যবহার করেছি। ট্রানজিশন সম্মন্ধে জানতে আমাদের সিএসএস(৩) ট্রানজিশন অধ্যায় ভিজিট করুন।
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #39ac73;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<p>অ্যানিমেটেড সার্চ ইনপুট:</p>
<form>
<input type="text" name="search" placeholder="সার্চ..">
</form>
</body>
</html>
টিপসঃ টেক্সট এরিয়ার সাইজ নিজের মত করে নির্ধারণ করার জন্য resize প্রোপার্টি ব্যবহার করা হয়। resize প্রোপার্টির মাধ্যমে টেক্সট এরিয়াকে রিসাইজ করা থেকে বিরত রাখা যায়।
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<style>
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #39ac73;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
</style>
</head>
<body>
<p><strong>টিপস:</strong> টেক্সট এরিয়াকে রিসাইজ থেকে বিরত রাখার জন্য resize প্রোপার্টি ব্যবহার করা হয়।</p>
<form>
<textarea>টেক্সট লিখুন...</textarea>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<style>
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #39ac73;
}
</style>
</head>
<body>
<p> স্টাইলকৃত একটি সিলেক্ট মেন্যুঃ</p>
<form>
<select id="country" name="country">
<option value="usa">চাঁদপুর</option>
<option value="usa">ঢাকা</option>
<option value="usa">ফরিদগঞ্জ</option>
</select>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=button], input[type=submit], input[type=reset] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<p>স্টাইল ইনপুট বাটনঃ</p>
<input type="button" value="বাটন">
<input type="reset" value="রিসেট">
<input type="submit" value="সাবমিট">
</body>
</html>
সিএসএস এর মাধ্যমে বাটন স্টাইল সম্পর্কে আর ভালভাবে জানতে, আমাদের সিএসএস বাটন টিউটোরিয়াল অধ্যায় ভিজিট করুন।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
